<!-- //预约订单 -->
<template>
	<view class="content">
		<!-- //时间区域 -->
		<view>
			<view class="week_day">
				<view v-for="(item,index) in list" :key='index' @click="getDay(item.years,index)" :class="{icons:active==index}">
					<view>{{item.day}}</view>
					<view :class="{icon_time:active==index,week_time:true} ">{{item.years_more}}</view>
				</view>
				
				
				
				
			</view>
			
		</view>
		<!-- //列表区域 -->
		<view v-if="detailList.length>0?false:true">
			<u-empty text="订单为空" mode="order"></u-empty>
		</view>
		<view class="list" v-for="(item,index) in detailList" :key='item.id'>
			<view class="list_top">
				<view class="list_left">
					<view class="left_top">今天 {{item.orderCreateTime|getHours()}}  {{item.introduceDetails}}·{{item.userNumber}}人  <!-- <text class="upTime">修改时间</text> --></view>
					<view>
						<text class="scrail1"></text><text class="public">服务:</text><text class="public_text">{{item.introduceDetails}} </text>
					</view>
					<view>
						<text class="scrail2"></text><text class="public">用时:</text><text class="public_text">预计{{item.estimatedTime}}小时 </text>
					</view>
				</view>
				<view class="list_right">
					<view @click="call(item.userPhone)"><text class="icon iconfont">&#xe63e;</text></view>
					<view><text class="log">￥</text><text class="price">{{item.orderPayAmount}}</text></view>
				</view>
			</view>
		
			<view class="list_botom">
				<view class="list-bot-left">
					<view class="imgs">
						<u-avatar :src="item.technicianPhoto"
						level-icon='man'
						size="70"
						mode="circle"
						sex-icon="woman"
						show-sex ="true"
						
						></u-avatar>
					</view>
		
					<view class="list-con">
						<view class="list-con-top">
							<text>{{item.technicianName}}</text>
							<text class="mei">美VIP</text>
							<text class="shi">实名认证</text>
						</view>
						<view class="list-con-bot">
							<text>预约{{item.technicianNumberCount}}次</text>|
							<text>好评{{item.technicianScore}}分</text>
						</view>
					</view>
				</view>
				
				<view class="right-list">
					<text class="right-list-text1" @click="cancel(index)">取消</text>
					<text class="right-list-text2">接单</text>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script >
	import {getDateAppointment} from '@/api/index.js'
	export default {
		data(){
			return{
				time:'',
				list:[],
				active:0,
				detailList:[]//预约订单列表
			}
		},
		created() {
			
		},
		mounted() {
			//监听时间
			let that = this
				this.getTime()
				this.getList()
		},
		components:{
			
		},
		methods:{
			//获取列表数据
			getList(){
				let that =this
				uni.showToast({
					icon:"loading",
					duration:9999
				})
				//获取预约列表
				getDateAppointment(that.time).then(res=>{
					if(res){
						uni.hideToast()
					}
					that.detailList = res[1].data.data
					// console.log(that.detailList[0].orderCreateTime)
					
					console.log(that.detailList)
				}).catch(err=>{
					console.log(err)
				})
			},
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//点击取消
			cancel(index){
				uni.$emit('cancel',{
					show:true
				})
			},
			getTime(){
				let that = this
				var obj = {
					years:'',
					days:''
				}
				 for(var i=0;i<7;i++)
				           {
				            var weekDayArr=["周日","周一","周二","周三","周四","周五","周六"]//星期映射数组
				            var myDate = new Date()
				            var milliseconds=myDate.getTime()+1000*60*60*24*i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
				            var newMyDate = new Date(milliseconds);
				            var weekDay=newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
				            var year = newMyDate.getFullYear();//获取当前年
				            var month = newMyDate.getMonth()+1;//获取当前月
				            var day = newMyDate.getDate();//获取当前日
				             // console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
							// that.list.push(year+'/'+month+'/'+day+weekDayArr[weekDay])
							
							// console.log(weekDayArr[weekDay])
							var obj = {
								years:year+'/'+month+'/'+day,
								years_more:month+'月'+day+'日',
								day:weekDayArr[weekDay]
							}
							that.list.push(obj)
				           }
						that.list[0].day='今天'
						that.list[1].day='明天'
						that.list[2].day='后天'
						that.time = that.list[0].years.replace(/\//g,'-')
						
			},
			//动态添加样式上
			getDay(y,index){
				// console.log(y)
				this.active = index
				let a = y.replace(/\//g,'-')
				this.time = a
				// console.log(this.time)
				this.getList()
				
			}
		},
		filters:{
			getHours(t){
				let hours = new Date(t).getUTCHours()
				let min = new Date(t).getMinutes().toString().padStart("2",0)
				let str = hours +':' + min
								
				return str
			}
		}
	}
</script>
<style >
	page{
		/* height: 100%; */
		background:#EEEEEE ;
		/* padding-bottom: 100rpx; */
	}
</style>
<style scoped lang="less">
	.content{
		// padding-bottom: 100%;
		height: 100%;
		background: #EEEEEE;
		.list{
			height: 297rpx;
			// width: 100%;
			// border: 1px solid red;
			background-color: white;
			margin-top: 19rpx;
			padding: 29rpx 27rpx;
			.list_top{
				display: flex;
				align-items: center;
				border-bottom: 0.4rpx solid #E1E1E1;
				.list_left{
					.left_top{
						
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #282828;
						line-height: 30rpx;
						.upTime{
							display: inline-block;
							width: 90rpx;
							// height: 38rpx;
							background: #ECECEC;
							border-radius: 17rpx;
							text-align: center;
							line-height: 38rpx;
							margin-left: 20rpx;
							font-size: 17rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #282828;
						}
					}
					.scrail1{
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: #00C6C2;
						border-radius: 50%;
						margin-right: 9rpx;
					}
					.scrail2{
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: black;
						border-radius: 50%;
						margin-right: 9rpx;
					}
					.public{
						
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #414141;
						margin-right: 9rpx;
					}
					.public_text{
						
						font-size: 24rpx;
						font-family: PingFang;
						// font-weight: bold;
						color: #414141;
						line-height: 30rpx;
					}
				}
				.list_right{
					// width: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
				
					align-items: flex-end;
					// justify-content:space-around;
					justify-content: space-between;
					
					.iconfont{
						font-size:60rpx ;
						color:#9f9f9f;
					}
					.log{
						font-size: 22rpx;
						color: #000000;
						font-family:PingFang-SC-Regular;
					}
					.price{
						
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
			.list_botom{
				padding:22rpx 0 0 0;
				display: flex;
				align-items:flex-end;
				justify-content: space-between;
				
				.list-bot-left{
					display: flex;
					// align-items: center;
					justify-content: space-between;
					align-items: center;
					// :v-deep.u-avatar-exe{
					// 	top: 60%;
					// 	width: 25rpx;
					// 	height: 25rpx;
					// 	// /deep/u-avatar__sex{
					// 	// 	font-size: 9rpx;
					// 	// }
					// }
					.imgs{
						flex: 1;
						margin-right: 15rpx;
					}
					
					.list-con{
					
						
						.list-con-top{
							
							text{
								display: inline-block;
								
								font-size: 24rpx;
								font-family: PingFang;
								font-weight: 500;
								color: #333333;
								line-height: 30rpx;
							}
							.mei{
								// width: 62rpx;
								height: 24rpx;
								background: #000000;
								border-radius: 4rpx;
								text-align: center;
								line-height: 24rpx;
								font-size: 16rpx;
								font-family: PingFang;
								font-weight: 500;
								color: #F0D9A9;
								// line-height: 30px;
								margin-left: 24rpx;
							}
							.shi{
								width: 75rpx;
								height: 24rpx;
								background: #F1F1F1;
								border-radius: 4px;
								line-height: 24rpx;
								text-align: center;
								margin-left: 24rpx;
								font-size: 16rpx;
								font-family: PingFang;
								font-weight: 500;
								color: #A5A0A0;
								line-height: 30rpx;
							}
						}
						.list-con-bot{
							display: inline-block;
							font-size: 18rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #777777;
							line-height: 30rpx;
						}
					
					}
				}
				.right-list{
					display: flex;
					// font-size: 20rpx;
					flex: 2;
					// width: 100%;
					// justify-content: space-between;
					justify-content: flex-end;
					// align-items:center;
					justify-content:;
					text{
						display: inline-block;
					}
					.right-list-text1{
						width: 106rpx;
						height: 58rpx;
						border: 1rpx solid #979797;
						border-radius: 4rpx;
						text-align: center;
						line-height: 58rpx;
						color: #979797;
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: 500;
						margin-right: 24rpx;
					}
					.right-list-text2{
						
						width: 141rpx;
						height: 58rpx;
						background: #00C6C2;
						border-radius: 4rpx;
						text-align: center;
						line-height: 58rpx;
						
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
		//时间区域
		
	}
.week_day{
		display: flex;
		justify-content: space-around;
		
		font-size: 26px;
		font-family: PingFang;
		font-weight: 500;
		color: #777777;
		line-height: 30px;
		background: white;
		.icons{
			
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
			border-bottom: 4rpx solid #1EBBBD;
		}
		.week_time{
			
		
		font-size: 16rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #777777;
		line-height: 30rpx;
		}
		.icon_time{
			font-size: 23rpx !important;
			color: #000000;
		}
	}
</style>
